<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>云存储</title>
    <meta content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
    <script type="text/javascript" src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
    <script type="text/javascript" src="trem.js"></script>
    <link rel="stylesheet" href="index.css">
    <style>
        #container {
            width: 60%;
            height:1rem;
            float: left;
            margin-left: 20%;
            margin-top: 0.8rem;
            /*background: black;*/
        }
        .flip {
            width:100%;
            height: 0.6rem;
            float: left;
            color: yellow;
        }
        .price-div {
            font: 12px tahoma, Arial, Verdana, sans-serif;
        }
        .price-div > div,
        .total-price > div {
            float: left;
            text-align: center;
        }
        .price-icon {
            /*background: dimgrey;*/
            width: 25px;
            height: 30px;
            line-height: 30px;
            font-size:0.9rem;
            font-weight: bold;
            float: left;
            margin-right: 2px;
        }
        .price-div .number {
            background: dimgrey;
            width:1rem;
            height:1rem;
            line-height: 1rem;
            font-size:0.9rem;
            font-weight: bold;
            overflow: hidden;
            margin-right: 1px;
        }

        .price-div .sign {
            font-size:0.9rem;
            font-weight: bold;
            line-height: 68px;
            height: 48px;
        }
    </style>
</head>
<body>
    <div class="main">
        <!-- 头部 -->
        <div class="top">
            <div class="left"></div>
            <div class="right"></div>
        </div>
        <div class="top_left"></div>
        <div class="top_center">云存储</div>
        <div class="top_right"></div>
        <div class="open">开通</div>
        <!-- 计数器 -->
        <div id="container">
            <div class="flip">
                <!--<div class="price-icon">￥</div>-->
                <div class="price-div">
                    <div class="h-k number"></div>
                    <div class="t-k number"></div>
                    <div class="k number"></div>
                    <!--<div class="comma sign">,</div>-->
                    <div class="h number"></div>
                    <div class="t number"></div>
                    <div class="single number"></div>
                    <!--<div class="sign dot">.</div>-->
                    <div class="t-d number"></div>
                    <div class="h-d number"></div>
                </div>
            </div>
            <button class="animate-btn">模拟滚动</button>
        </div>
        <!--需要云存储的三大理由-->
        <div class="tree">
            您需要云存储的三大理由
        </div>
        <div class="trees"></div>
        <!-- 弹窗 -->
        <div class="button_tc">
            <div class="button_1">在线购买云服务</div>
            <div class="button_2">
                <div class="button_21">录像使用存储时长：</div>
                <div class="button_22">7天循环</div>
                <div class="button_22">30天循环</div>
            </div>
            <div class="button_2">
                <div class="button_21">套餐类型：</div>
                <div class="button_22">包月</div>
                <div class="button_22">包年</div>
            </div>
            <div class="button_2">
                <div class="button_21">服务期限：</div>
            </div>
            <div class="button_1">您需要支付：<span style="color: #0066FF">￥125元</span></div>
            <div class="open">确定</div>
        </div>
    </div>
</body>
<script type="text/javascript" src="index.js"></script>
</html>